import React, { Component } from 'react'
import "./study.scss"
import Header from '../../components/Header/header'
import Footer from '../../components/Footer/footer'
import { getApiCoursesContentInfo , getApiCoursesCatalogue , getApiCoursesInfo , getApiInsertTotalRecord , getApiSaveUserNote } from "../../axios/api"
import { get, UrlSearch } from '../../axios/localstorage'
import { message } from 'antd'
// import { SketchPicker , ChromePicker  } from 'react-color';

export default class study extends Component {

    state = {
        id:'',
        chapter_id:'',
        content_id:'',
        data:{
            filepaths:[]
        },
        info:{},
        title:"课堂笔记标题",

        showFont:false,
        showColor:false,
        fontList:[
            {label:"12px",size:1},
            {label:"14px",size:2},
            {label:"16px",size:3},
            {label:"18px",size:4},
            {label:"20px",size:5},
        ],
        font:'',
        colorChange:true,

        list:[],

        content:"<p>电子商务与传统企业转型</p>",
        content2:"<img alt='' src='assets/imgs/zanwuxuexineirong.png' /><img alt='' src='assets/imgs/zanwuxuexineirong.png' />",
        progress:0,

        tdata:{
            teacher_info:{},
            with_course:[],
        },

        type:1,

        color:"#1bba84",

        colors:[
            '#FF0000',
            '#FF7D00',
            '#FFFF00',
            '#00FF00',
            '#00FFFF',
            '#0000FF',
            '#FF00FF',
            '#000000',
        ]
    }

    componentDidMount(){

        // var that = this;

        // window.ColorPicker(
  
        //     document.getElementById('color-picker'),
        //     function(hex, hsv, rgb) {
        //       // console.log(hsv.h, hsv.s, hsv.v);                 // [0-359], [0-1], [0-1]
        //       // console.log(rgb.r, rgb.g, rgb.b);                 // [0-255], [0-255], [0-255]
        //       // document.body.style.backgroundColor = hex;        // #HEX
      
        //       console.log(hex);

        //       let color = hex;

        //       that.setState({
        //         color:hex
        //       })

        //       that.refs['ipt'].click()
      
        //     //   return hex;
        //     });
    }

    componentWillMount(){
        window.scroll(0,0);
        let id = UrlSearch('id');
        let chapter_id = UrlSearch('chapter_id');
        let content_id = parseInt(UrlSearch('content_id'));

        this.setState({
            id,
            chapter_id,
            content_id
        })
        this.getCate(id);
        this.getTData(id);
        setTimeout(()=>{
            this.getData();
        },50)

        let content2 = this.state.content2;

        let str =content2.replace("<img","<img width='100%'");

        console.log(str);
        
    }

    gotoCourseInfo=(id)=>{
        this.props.history.push('/courseinfo?id='+id);
    }

    getTData=(id)=>{
        let param = {
            id,
            token:get('token'),
        }

        getApiCoursesInfo(param)
        .then(req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    tdata:data
                })
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    gotoStudy=(item,elem)=>{
        
        if(!elem.is_lock){
            message.info("请按顺序学习！");
            return false;
        }

        this.setState({
            chapter_id:item.id,
            content_id:elem.id
        })

        setTimeout(()=>{
            this.getData();
        },50)
        
        this.props.history.push('/study?id='+this.state.id+'&chapter_id='+item.id+"&content_id="+elem.id);

    }

    changeProgress=(progress)=>{
       
       if(progress > this.state.progress){
            console.log(progress);
            this.setState({
                progress
            })

            let param ={
                course_id:this.state.id,
                chapter_id:this.state.chapter_id,
                content_id:this.state.content_id,
                progress,
                token:get('token'),
                is_finish:progress>=90?2:1
           }
    
           getApiInsertTotalRecord(param)
           .then( req =>{
               if(req.data.code === 1){
    
               }
           }).catch( err =>{
               console.error(err);
           })
       }

    }

    gotoSaveNote=()=>{

        let div = document.getElementById('textBox');
        let text = div.innerHTML;

        console.log(text);

        let param = {
            // type:1,
            course_id:this.state.id,
            chapter_id:this.state.chapter_id,
            content_id:this.state.content_id,
            id:this.state.data.note.id?this.state.data.note.id:'',
            title:this.state.title,
            content:text,
            token:get('token'),
            type:get('type')?get('type'):0,
            // contents:get('city')?get('city'):get('mechanism'),
        }

        getApiSaveUserNote(param)
        .then(req =>{
            if(req.data.code === 1){
                message.success("保存成功！");
            }else{
                message.info(req.data.msg);
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    getCate=(id)=>{
        let param = {
            id,
            token:get('token'),
        }

        getApiCoursesCatalogue(param)
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    list:data
                })
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    getData=()=>{
        let param = {
            token:get('token'),
            course_id:this.state.id,
            chapter_id:this.state.chapter_id,
            content_id:this.state.content_id
        }

        getApiCoursesContentInfo(param)
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;

                // let str = "<img"

                data.content = data.content.replace(/<img/g,"<img width='100%'");
                this.setState({
                    data,
                    info:data.courses_info,
                    progress:data.record.progress?parseInt(data.record.progress):0,
                })

                let textBox = document.getElementById('textBox');
                if(data.note.id){
                    textBox.innerHTML = data.note.html_content;
                }else{
                    textBox.innerHTML = '';
                }

                if(data.type === 1){
                    console.log('ifram');
        
                    var iframe = document.getElementById('iframe');
                
                    var ch = document.documentElement.clientHeight || document.body.clientHeight;

                    console.log(ch);
        
                    iframe.onload = ()=>{
        
                        
                        let height = iframe.contentDocument.body.scrollHeight;
                        
                        setTimeout(()=>{
        
                            window.scroll(0,0);
        
                            var frameWidow = iframe.contentWindow;
                            var scon = document.getElementById('sss');
        
                            var sconH = scon.clientHeight;
        
                            console.log(sconH);
        
                            console.log(height);
                        
        
                            var viewH = ch - 433;
        
                            console.log(viewH);
        
        
                            if(height < viewH){
                                //内容少于一页可视区
                                this.changeProgress(100);
                                let cleft = document.getElementById('left');
                                let right = document.getElementById('right');
                                right.style.height = cleft.offsetHeight + "px";
                            }
        
                            if(height > viewH && height <= sconH){
        
        
                                let onScroll = ()=>{
                                    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        
                                    let progress = parseInt((viewH + scrollTop)/height*100);
        
                                    if(progress%10 === 0){
                                        this.changeProgress(progress);
                                    }
        
                                    if(viewH + scrollTop > height){
        
                                        this.changeProgress(100);
        
                                        window.removeEventListener('scroll',onScroll);
                                    }
                                }
        
                                window.addEventListener( 'scroll',onScroll)
                                
                            }
        
                            if(height > sconH){
                                //内容超出 出现滚动
        
                                let onFscroll = ()=>{
                                    
                                    let top = frameWidow.document.documentElement.scrollTop;
        
        
                                    let progress = parseInt((sconH + top + 16)/height*100);
                                    if(progress%10 === 0){
                                        this.changeProgress(progress);
                                    }
        
                                    if(top + sconH + 16 > height){
                                        this.changeProgress(100);
                                        frameWidow.removeEventListener('scroll',onFscroll);
                                    }
                                }
        
        
                                frameWidow.addEventListener('scroll',onFscroll);
        
                                let onScroll = ()=>{
                                    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        
                                    let progress = parseInt((viewH + scrollTop)/height*100);
                                    if(progress%10 === 0){
                                        this.changeProgress(progress);
                                    }
        
                                    if(viewH + scrollTop > sconH){
                                        window.removeEventListener('scroll',onScroll);
                                    }
                                }
        
                                window.addEventListener( 'scroll',onScroll)
        
                            }
        
                        },100)
        
                
                    }
                }else{
        
                    console.log('video');
        
                    let video = document.getElementById('videoObj');

                    let cleft = document.getElementById('left');
                    let right = document.getElementById('right');
                    right.style.height = cleft.offsetHeight + "px";

                    console.log(cleft.offsetHeight);
        
                    video.onloadedmetadata = ()=> {
                        console.log('metadata loaded!');
                        console.log(video.duration); //打印时长
                        
                        if(this.state.progress){
                            let time = parseInt(video.duration*this.state.progress/100);
                            console.log(time); 
        
                            video.currentTime = time;
                        }
                        // that.setState({
                        //   total:video.duration
                        // })
                    };
        
                    // video.currentTime = 20;
        
                    
                    video.addEventListener("playing",function(){
                        // var timers=Math.ceil(video.duration); //视频总时长
                        console.log(video.duration);
                    })
        
                    video.addEventListener("timeupdate",()=>{
                        var currentTime = Math.ceil(video.currentTime);
        
                        var duration=Math.floor(video.duration)
                       
                        let progress = parseInt(currentTime/duration*100);
        
                        console.log(currentTime);
                        console.log(progress);
        
                        if(progress < 100){
                            this.changeProgress(progress);
                        }else{
                            this.changeProgress(100);
                        }
                    });
                    video.addEventListener("pause",function(){
                        var currentTime = Math.floor(video.currentTime);
                       
                        console.log(currentTime);
                    });  
                }
                
            }else{
                message.info(req.data.msg);
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    gotoExam=()=>{

        if(this.state.data.is_q){
            message.info("暂无考试试题!");
            return false; 
        }

        this.props.history.push('/exam?id='+this.state.id+'&chapter_id='+this.state.chapter_id+"&content_id="+this.state.content_id);
    }

    gotoNext=()=>{
        if(!this.state.data.is_pass){
            message.info("请先通过考试!");
            return false;
        }

        if(this.state.data.next_content_id){
            this.props.history.push('/study?id='+this.state.id+'&chapter_id='+this.state.chapter_id+"&content_id="+this.state.data.next_content_id);

            this.setState({
                content_id:this.state.data.next_content_id
            })
            setTimeout(()=>{
                window.scroll(0,0);
                this.getData();
            },50)
        }else{
            message.info("暂无下一节课程!");
        }

        
    }

    gotoPage=(page)=>{
        this.props.history.push(page);
    }

    requestFullScreen=(element) => {
        var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
        if (requestMethod) {
            requestMethod.call(element);
        } else if (typeof window.ActiveXObject !== "undefined") {
            var wscript = new window.ActiveXObject("WScript.Shell");
            if (wscript !== null) {
                wscript.SendKeys("{F11}");
            }
        }
    }

    setIframeFullScreen=()=>{

        if(this.state.data.type === 1){
            let iframe = document.getElementById('iframe');
            this.requestFullScreen(iframe);
        }else{
            let videoObj = document.getElementById('videoObj');
            videoObj.webkitRequestFullScreen();
        }

        
    }

    // preview=(fang)=>{
    //     if (fang < 10){
    //         bdhtml=window.document.body.innerHTML;//获取当前页的html代码
    //         sprnstr="<!--startprint"+fang+"-->";//设置打印开始区域
    //         eprnstr="<!--endprint"+fang+"-->";//设置打印结束区域
    //         prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html
    //         prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html
    //         window.document.body.innerHTML=prnhtml;
    //         window.print();
    //         window.document.body.innerHTML=bdhtml;
    //     } else {
    //         window.print();
    //     }
    // }

    doPrint = () => {

        const el = document.getElementById('printBox');
        const iframe = document.createElement('IFRAME');
        let ppp = document.getElementById('ppp');
        let doc = null;
        // iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:500px;top:500px;');
        ppp.appendChild(iframe);
        doc = iframe.contentWindow.document;
        // 引入打印的专有CSS样式，根据实际修改
        // doc.write('<LINK rel="stylesheet" type="text/css" href="css/print.css">');
        doc.write(el.innerHTML);
        doc.close();
        // 获取iframe的焦点，从iframe开始打印
        iframe.contentWindow.focus();
        iframe.contentWindow.print();
        if (navigator.userAgent.indexOf("MSIE") > 0)
        {
            ppp.removeChild(iframe);
        }
        
    }

    render() {
        return (
            <div className="study" id="ssss">
                <Header show="1" />
                <div className="cen">
                    <div className="curent">
                        <div className="cleft">
                            <img alt="" src="assets/imgs/dingwei.png" className="wei" />
                            <h2 className="c_point" onClick={()=>{
                                if(get('type')){
                                    // this.gotoPage('/index')
                                    this.gotoPage('/home')
                                  }else{
                                    this.gotoPage('/home')
                                  }
                            }}>首页</h2>
                            <img alt="" src="assets/imgs/xiaji.png" />
                            <h2 className="c_point" onClick={()=>{this.gotoPage('/course')}}>课程中心</h2>
                            <img alt="" src="assets/imgs/xiaji.png" />
                            <h2 className="c_point" onClick={()=>{this.gotoPage('/courseinfo?id='+this.state.id)}}>课程详情</h2>
                            <img alt="" src="assets/imgs/xiaji.png" />
                            <h2>学习中心</h2>
                        </div>
                    </div>
                </div>

                <div className="cen">
                    <div className="smain">
                        <div className="shead">
                            <div className="sleft" style={{backgroundImage:"url('"+this.state.info.image_text+"')"}}></div>
                            <div className="sright">
                                <div className="title">
                                    <h2>{this.state.info.title}</h2>
                                    
                                    <div hidden={!this.state.info.is_new}>精品</div>
                                </div>
                                <div className="details">
                                    <img alt="" src="assets/imgs/renhsu.png" />
                                    <p>{this.state.info.sale_num}人</p>
                                    <img alt="" src="assets/imgs/leixing.png" />
                                    <p>{this.state.info.nums}课</p>
                                    <img alt="" src="assets/imgs/shijain.png" />
                                    <p>{this.state.info.update_time_text}</p>
                                </div>
                            </div>
                            {/* <a className="down" hidden={!this.state.data.filepath} href={this.state.data.filepath} name="111" download="附件">
                                <img alt="" src="assets/imgs/down2.png"/>
                                <p>资料下载</p>
                            </a> */}
                        </div>

                        <div className="sbox">
                            <div className="sleft" id="left">
                                <div className="stitle">
                                    <h2>{this.state.data.title}</h2>
                                    <img onClick={()=>{this.setIframeFullScreen()}} alt="" src="assets/imgs/full.png" />
                                </div>
                                <div className="scon"  id="sss" hidden={this.state.data.type !== 1}>
                                    <iframe id="iframe" title="iframe" srcDoc={this.state.data.content}></iframe>
                                </div>
                                <div className="scon" hidden={this.state.data.type !== 2}>
                                    <div className="svb">
                                        <video id="videoObj"  controls src={this.state.data.image_text}></video>
                                    </div>
                                    <div className="cont" dangerouslySetInnerHTML={{
                                            __html: this.state.data.video_desc
                                        }}></div>
                                </div>
                                <div className="sbom">
                                    <div className="sprogress">
                                        <p>进度：</p>
                                        <div>
                                            <span className={this.state.progress >= 90 ? "green" :""} style={{width:''+this.state.progress+'%'}}></span>
                                        </div>
                                        <p>{this.state.progress}%</p>
                                        <h2 hidden={this.state.data.is_exam}>成绩：暂无</h2>
                                        <h2 hidden={!this.state.data.is_exam}>成绩：{this.state.data.score}</h2>
                                    </div>
                                    <div className="sbtns" hidden={this.state.progress >= 90}>
                                        <button className="b1">下一节</button>
                                        <button className="b2">开始考试</button>
                                    </div>
                                    <div className="sbtns" hidden={this.state.progress < 90}>
                                        <button className="b3" onClick={()=>{this.gotoNext()}}>下一节</button>
                                        <button className="b4" onClick={()=>{this.gotoExam()}}>开始考试</button>
                                    </div>
                                </div>
                            </div>
                            <div className="sright" id="right">
                                <div className="stitle">
                                    <p>课程目录</p>
                                </div>
                                <div className="stext">
                                    {
                                        this.state.list.map((item,index)=>{
                                            return <div className="sitem" key={index}>
                                                        <h2>{item.title}</h2>
                                                        {
                                                            item.child.map((elem,num)=>{
                                                                return <div className="c_class" key={num} onClick={()=>{this.gotoStudy(item,elem)}}>
                                                                            <div>
                                                                                <img hidden={elem.is_lock} alt="" src="assets/imgs/suo2.png" />
                                                                                <div hidden={!elem.is_lock}>
                                                                                    <img hidden={!elem.is_exam || this.state.content_id === elem.id} alt="" src="assets/imgs/yiwancheng.png" />
                                                                                    <img hidden={elem.is_exam || this.state.content_id === elem.id} alt="" src="assets/imgs/daiwancheng.png" />
                                                                                    <img hidden={this.state.content_id !== elem.id} alt="" src="assets/imgs/xuexizhong.png" />
                                                                                </div>
                                                                            </div>
                                                                            <p>{elem.title}</p>
                                                                        </div>
                                                            })
                                                        }
                                                    </div>
                                        })
                                    }
                                </div>
                            </div>
                        </div>

                        <div className="smsg">
                        注意：学习进度达到90%方可解锁下一节课程或参与本节考试，需考试章节考试及格后方可开启下一节课程
                        </div>

                        <div className="ppp" id="ppp"></div>

                        <div className="spage">

                                <div className="sleft">
                                    <div className="shead">
                                        <div className={this.state.type === 1?"si sactive":"si"} onClick={()=>{this.setState({type:1})}}>
                                        随堂笔记
                                        <div className="scen">
                                            <span></span>
                                        </div>
                                        </div>
                                        <div className={this.state.type === 2?"si sactive":"si"} onClick={()=>{this.setState({type:2})}}>
                                        课件下载
                                        <div className="scen">
                                            <span></span>
                                        </div>
                                        </div>
                                        <div className={this.state.type === 3?"si sactive":"si"} onClick={()=>{this.setState({type:3})}}>
                                        课程简介
                                        <div className="scen">
                                            <span></span>
                                        </div>
                                        </div>
                                    </div>
                                    <div className="ssbox" hidden={this.state.type !== 1}>
                                        <div className="s1">
                                            <div className="atext" id="textBox" contentEditable="true"></div>
                                        </div>
                                        <div className="aoptions">
                                            <div className="aitem">
                                                <input type="button" name="" value="加粗" onClick={()=>{document.execCommand('Bold')}} />
                                                <div className="adiv">
                                                    <div className="cen">
                                                        <img alt="" className="icon3" src="assets/imgs/icon3.png" />
                                                    </div>
                                                    <p>加粗</p>
                                                </div>
                                            </div>
                                            <div className="aitem">
                                                <input type="button" name="" value="倾斜" onClick={()=>{document.execCommand('Italic')}} />
                                                <div className="adiv">
                                                    <div className="cen">
                                                        <img alt="" className="icon2" src="assets/imgs/icon2.png" />
                                                    </div>
                                                    <p>倾斜</p>
                                                </div>
                                            </div>
                                            <div className="aitem">
                                                <input type="button" name="" value="下划线" onClick={()=>{document.execCommand('Underline')}} />
                                                <div className="adiv">
                                                    <div className="cen">
                                                        <img alt="" className="icon4" src="assets/imgs/icon4.png" />
                                                    </div>
                                                    <p>下划线</p>
                                                </div>
                                            </div>
                                            <div className="aitem" onMouseEnter={()=>{this.setState({showFont:true})}} onMouseLeave={()=>{this.setState({showFont:false})}}>
                                                <div className="adiv">
                                                    <div className="cen">
                                                        <img alt="" className="icon1" src="assets/imgs/icon1.png" />
                                                    </div>
                                                    <p>字号</p>
                                                </div>

                                                <div className="sels" hidden={!this.state.showFont} >
                                                    {
                                                        this.state.fontList.map((item,index)=>{
                                                            return <div key={index} className={this.state.font === item.label?'hover':''} onClick={()=>{this.setState({font:item})}}>
                                                                {item.label}
                                                                <input type="button" name="" value="字体" onClick={()=>{document.execCommand('Fontsize',false,item.size)}} />
                                                                </div>
                                                        })
                                                    }
                                                </div>
                                            </div>
                                            <div className="aitem" onMouseEnter={()=>{this.setState({showColor:true})}} onMouseLeave={()=>{this.setState({showColor:false})}}>
                                                

                                                <div className="adiv">
                                                    <div className="cen">
                                                        <img alt="" className="icon1" src="assets/imgs/icon1.png" />
                                                    </div>
                                                    <div className="cen">
                                                        <span className='cspan' style={{background:this.state.color}}></span>
                                                    </div>
                                                    <p>颜色</p>
                                                </div>
                                                <div className='color_picker' hidden={!this.state.showColor}>

                                                    <div className='cbox'>
                                                        {
                                                            this.state.colors.map((item,index)=>{
                                                                return <input type="button" key={index} style={{background:item}} className='cbtn' onClick={()=>{this.setState({color:item});document.execCommand("ForeColor",false,item);}} />
                                                            })
                                                        }
                                                        

                                                    </div>
                                                    
                                                </div>
                                                
                                            </div>
                                            {/* <div className="aitem">
                                                <div className='acolor'  style={{background:this.state.color}}></div>
                                            </div> */}
                                            <div className="abtns">
                                                <button className="abtn1" onClick={()=>{this.gotoSaveNote()}}>更新保存</button>
                                                <button className="abtn2" onClick={()=>{this.doPrint()}}>打印</button>
                                            </div>
                                        </div>
                                    </div>

                                    <div className="ssbox" hidden={this.state.type !== 2}>
                                        <div className="s2">
                                            {
                                                this.state.data.filepaths.map((item,index)=>{
                                                    return <div className="sdown">
                                                                <h2>{item.title}</h2>
                                                                <a className="down" target="_blank" without rel="noreferrer" href={item.file} name="111" download="附件">
                                                                    <img alt="" src="assets/img/xiazai.png"/>
                                                                    <p>下载</p>
                                                                </a>
                                                            </div>
                                                })
                                            }
                                            
                                            <div className="snone" hidden={this.state.data.filepaths.length !== 0}>
                                                <div className="cen">
                                                    <img alt="" src="assets/imgs/wudingdan.png" />
                                                </div>
                                                <h4>暂无可下载课件</h4>
                                            </div>
                                        </div>
                                    </div>

                                    <div className="ssbox" hidden={this.state.type !== 3}>
                                        <div className="cinfo">
                                            
                                            <div className="ctext">
                                                <div className="cont" dangerouslySetInnerHTML={{
                                                        __html: this.state.info.summary
                                                    }}></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                
                            
                                <div className="sRight">
                                <div className="cteacher" onClick={()=>{this.gotoPage('/teacherinfo?id='+this.state.tdata.teacher_info.id)}}>
                                    <h1>授课讲师</h1>
                                    <div className="ct_info">
                                        <div className="ct_avatar" style={{backgroundImage:"url('"+this.state.tdata.teacher_info.path_text+"')"}}></div>
                                        <div className="cdiv">
                                            <h2>{this.state.tdata.teacher_info.title}</h2>
                                            <p>{this.state.tdata.teacher_info.name}</p>
                                        </div>
                                    </div>
                                    <div className="ctext">
                                        <p>名师课程：{this.state.tdata.teacher_info.courses}课</p>
                                        <p>名师直播：{this.state.tdata.teacher_info.living}场</p>
                                    </div>
                                </div>

                                <div className="c_course">
                                    <h1>相关课程</h1>
                                    {
                                        this.state.tdata.with_course.map((item,index)=>{
                                            return <div className="item" hidden={index > 0} key={index} onClick={()=>{this.gotoCourseInfo(item.id)}}>
                                                        <div className="itop" style={{backgroundImage:"url('"+item.image_text+"')"}}>
                                                            {/* <span hidden={!item.is_new}>精品</span> */}
                                                        </div>
                                                        <div className="ibom">
                                                            <h2>{item.title}</h2>
                                                            <p>北京理工大学</p>
                                                            <p>王文霞老师</p>
                                                            <div className='idiv'>
                                                                <div>10课时</div>
                                                                <span>4.6万人参加</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                        })
                                    }
                                </div>
                            </div>
                            
                            </div>

                            
                        </div>

                        

                        
                    </div>

                <Footer />
            </div>
        )
    }
}
